<!DOCTYPE html> 
<html> 
    <head> 
  <link rel="stylesheet" href="{{STATIC_URL}}jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="{{STATIC_URL}}jquery.min.js"></script>
    <script src="{{STATIC_URL}}jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script type="text/javascript">
foo =setInterval(function(){
  //$('#fetcher').html('<br><br><p><img  src="{{STATIC_URL}}ajax-loader.gif"/></p>');
$('#fetcher').load('/messages/fetch/{{lecture.id}}/{{len}}');
}, 5000);
</script>
</head> 
<body >


<div data-role="page" id="home"> 
<div data-role="header">
 <a href='/quiz/lecture/end/{{lecture.id}}' rel="external">End lecture</a>
  <h1 style="color:#FFFFFF;">Interactive Pad</h1>  

<div data-role="navbar">
	<ul>
<li><a onclick="clearTimeout(foo);
$('#sideNoti').load('/quiz/lecture/getquizzes/{{lecture.id}}')"   href="#" >Quizzes</a></li>
		<li><a    href="#"  onclick="clearTimeout(foo);
		$('#sideNoti').load('/messages/list/{{lecture.id}}')" class="ui-btn-active ui-state-persist">Messaging Board</a></li>
	</ul>
</div><!-- /navbar -->   

    </div> 
 <div data-role="content" data-theme="c" data-dividertheme="b">
<!--   
<a href="#" onclick="clearTimeout(foo);
$('#sideNoti').load('/messages/list/{{lecture.id}}')">Fetch messages</a>-->  

<div  id="fetcher"></div>
{% ifequal len z %}  
 <ul data-role="listview" data-inset="true" >

<li >No messages yet.</li></ul>
 
        {% else %}
  <ul data-role="listview" data-inset="true" >
{% for msg in msgs %}

<li style="white-space:normal;"><a style="font-weight:bold;font-size:25px;font-family:'Times New Roman', Times, serif; white-space:normal;" href="#" onclick="clearTimeout(foo);$('#sideNoti').load('/messages/show/{{msg.id}}');" >{{msg.title}}:<div style="font-weight:normal;font-size:20px;font-family:'Times New Roman', Times, serif;">
{{msg.content}}</div>
  <a href="#"  onclick="clearTimeout(foo);$('#sideNoti').load('/messages/delete/{{msg.id}}');" data-theme="c" data-role="button" data-icon="delete" data-iconpos="notext">Done!!!</a> 

</a></li>
{% endfor %}</ul>

  
  
{% endifequal %}
</div>     
</div>
</body>

</html>

